<!DOCTYPE html>
<html>
  <head>
    <title>Popcorn Vimeo Player Example</title>
    <style>
      body {
        color: black;
        background-color: white;
        font-family: Arial, sans-serif;
      }

      iframe {
        border: 1px solid black;
        padding: 0;
        margin: 0;
        width: 427px;
        height: 240px;
        background-color: black;
        margin: auto;
        display: block;
      }

      table {
        border: none;
        margin: auto;
        margin-top: 1ex;
      }

      th {
        text-align: right;
      }

      caption {
        background-color: #ccc;
      }

      thead th {
        background-color: #ccc;
      }

      #events td {
        text-align: right;
        width: 4ex;
      }

      hr {
        clear: both;
        margin-top: 2em;
      }

      .true {
        background-color: #8f8;
      }

      .false {
        background-color: #faf;
      }

      #buttons {
        text-align: center;
      }

      #m_video td, #m_video th, #tracks td, #tracks tth {
        text-align: center;
        padding-left: 0.5ex;
        padding-right: 0.5ex;
      }
    </style>

    <script src="../../popcorn.js"></script>
    <script src="../../modules/player/popcorn.player.js"></script>
    <script src="../../wrappers/common/popcorn._MediaElementProto.js"></script>
    <script src="../../wrappers/vimeo/popcorn.HTMLVimeoVideoElement.js"></script>
    <script src="popcorn.vimeo.js"></script>
    <script src="../../plugins/footnote/popcorn.footnote.js"></script>
    <script>
      (function() {
        // was extracted from the spec in November 2011
        var media_events = {};
        "loadstart progress suspend abort error emptied stalled loadedmetadata loadeddata canplay canplaythrough waiting seeking seeked ended durationchange timeupdate play pause ratechange volumechange".split(" ").forEach( function( value, index, array ) {
          media_events[ value ] = 0;
        });

        // was extracted from the spec in November 2011
        var media_properties = [ "error", "src", "currentSrc", "crossOrigin", "networkState", "preload", "buffered", "readyState", "seeking", "currentTime", "initialTime", "duration", "startOffsetTime", "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable", "ended", "autoplay", "loop", "mediaGroup", "controller", "controls", "volume", "muted", "defaultMuted", "width", "height", "videoWidth", "videoHeight", "poster" ];

        var media_properties_elts = null;

        function init() {
          var player = Popcorn.vimeo( "video", "http://player.vimeo.com/video/11336811" )
            .footnote({
              start: 5,
              end: 40,
              text: "The video popcorn being popped.",
              target: "footnotediv"
            });
          document._video = player.media;

          init_events();
          init_properties();
          init_mediatypes();

          // properties are updated even if no event was triggered
          setInterval(update_properties, 500);
        }

        document.addEventListener("DOMContentLoaded", init, false);

        function init_events() {
            for (key in media_events) {
              document._video.addEventListener(key, capture, false);
            }

            var tbody = document.getElementById("events");
            var i = 1;
            var tr = null;
            for (key in media_events) {
              if (tr == null) {
                tr = document.createElement("tr");
              }
              var th = document.createElement("th");
              th.textContent = key;
              var td = document.createElement("td");
              td.setAttribute("id", "e_" + key);
              td.innerHTML = "0";
              td.className = "false";
              tr.appendChild(th);
              tr.appendChild(td);

              if ((i++ % 5) == 0) {
                  tbody.appendChild(tr);
                  tr = null;
              }
            }

            if (tr != null) {
              tbody.appendChild(tr);
            }
        }

        function init_properties() {
            var tbody = document.getElementById("properties");
            var i = 0;
            var tr = null;
            media_properties_elts = new Array(media_properties.length);
            do {
              if (tr == null) {
                tr = document.createElement("tr");
              }
              var th = document.createElement("th");
              th.textContent = media_properties[i];
              var td = document.createElement("td");
              td.setAttribute("id", "p_" + media_properties[i]);
              var r = eval("document._video." + media_properties[i]);
              td.innerHTML = r;
              if (typeof(r) != "undefined") {
                td.className = "true";
              } else {
                td.className = "false";
              }
              tr.appendChild(th);
              tr.appendChild(td);
              media_properties_elts[i] = td;
              if ((++i % 3) == 0) {
                tbody.appendChild(tr);
                tr = null;
              }
            } while (i < media_properties.length);
            if (tr != null) {
              tbody.appendChild(tr);
            }
        }

        function capture(event) {
          media_events[event.type] = media_events[event.type] + 1;
          console.log(event.type);
          for (key in media_events) {
            var e = document.getElementById("e_" + key);
            if (e) {
              e.innerHTML = media_events[key];
              if (media_events[key] > 0) e.className = "true";
            }
          }
          update_properties();
        }

        function update_properties() {
          var i = 0;
          for (key in media_properties) {
            var val = eval("document._video." + media_properties[key]);
            media_properties_elts[i++].innerHTML = val;
          }
        }
      })();
    </script>
  </head>
  <body>
    <h1>HTML5 Video Events and API in Vimeo</h1>

    <div>
      <div id="video"></div>

      <div id='buttons'>
        <button onclick="document._video.load()">load()</button>
        <button onclick="document._video.play()">play()</button>
        <button onclick="document._video.pause()">pause()</button><br>
        <button onclick="document._video.currentTime+=10">currentTime+=10</button>
        <button onclick="document._video.currentTime-=10">currentTime-=10</button>
        <button onclick="document._video.currentTime=50">currentTime=50</button><br>
        <button onclick="document._video.volume+=0.1">volume+=0.1</button>
        <button onclick="document._video.volume-=0.1">volume-=0.1</button>
        <button onclick="document._video.muted=true">muted=true</button>
        <button onclick="document._video.muted=false">muted=false</button><br>
      </div>
      <table summary='The Media Events table contains the number of times each media event has been received'>
        <caption>Media Events</caption>
        <tbody id='events'>
        </tbody>
      </table>
      <table summary='The Media Properties table contains the value of the media properties'>
        <caption>Media Properties</caption>
        <tbody id='properties'>
        </tbody>
      </table>
    </div>

    <div>
      <h3>Description</h3>
      <p>
        This demo will showcase how a Vimeo flash video can be integrated into Popcorn. This  is done by making the flash video masquerade as HTML 5 video.<br />
        Due to the Flash security model, this demo must be  run from a web server<br />
      <hr >
        Vimeo does not support their player to be chromeless (hidden controls), but custsom controls have been developed and tied into their player.<br />
        Clicking play/pause or seeking in either the video or via custsom controls will cause the other to update.<br />
        Clicking on the embed option in the Vimeo player while the video is playing will cause the video to pause and custom controls to update.<br />
        The vimeo video can be specified in the HTML source by giving the vimeo web site url (http://player.vimeo.com/video/VIDEOID) to either the Popcorn.vimeo or as the iframe src attribute.<br/>
      </p>
      <h4>Expected Events</h4>
      <ul>
        <li>From 5 to 40 seconds, the footnote 'The video is popcorn being Popped' will appear below 'Footnote Area'.</li>
      </ul>
      <div id="footnotediv" width="50%" height="50%">
        <strong>Footnote Area</strong><br />
      </div>
    </div>
  </body>
</html>
